import React, { Component } from 'react'
import { getCurrentInstance } from '@tarojs/taro'
import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { Loading, SpNote, SpNavBar, FilterBar } from '@/components'
import api from '@/api'
import { AtCalendar } from "taro-ui"
import SpPage from '@/components/sp-page'
import './trade-detail.scss'
import dayjs from 'dayjs'
import { info } from '@/api/aftersales'

export default class DistributionTrade extends Component {
    $instance = getCurrentInstance()

    constructor(props) {
        super(props)

        this.state = {
            ...this.state,
            orderInfo: {}
        }
    }

    async componentDidMount() {
        const { order_id } = this.$instance.router.params
        let info = await api.distribution.brokerageInfo({ order_id })
        // info.itemsInfo.create_time = dayjs.unix(1318781876)
        this.setState({
            orderInfo: info
        })
    }

    render() {
        const { orderInfo } = this.state

        return (
            <View className='page-distribution-trade-detail'
            >
                <SpNavBar title='订单详情' leftIconType='chevron-left' />
                <View className='page-distribution-trade-detail-content'>
                    <View className='page-distribution-trade-detail-content-header'>
                        <View className='header-text'>订单{orderInfo.is_close ? '已完成' : '未完成'}</View>
                        <View className='header-text'>{orderInfo.is_close ? '已到账' : '未到账'}{'\u00A0'}<Text style={{ fontSize: '14px', whiteSpace: 'normal', }}> ¥</Text>{orderInfo.rebate ? orderInfo.rebate / 100 : ''}</View>
                    </View>
                    <View className='page-distribution-trade-detail-content-goods'>
                        <View className='goods-info'>商品信息<Text style={{ fontSize: '12px', whiteSpace: 'normal', color: '#555' }}>（共{orderInfo.goodsInfo?.length}件）</Text></View>
                        {orderInfo.goodsInfo?.map((info) => {
                           return( <View className=' goods-detail'>
                                <View className='goods-detail-img'>
                                    <Image
                                        className='goods-logo'
                                        src={info.pic ? info.pic : ''}
                                    />
                                </View>

                                <View className='goods-name'>
                                    <View>{info.item_name}</View>
                                    <View style={{ color: '#555' }}>x{info.num}</View>
                                </View>
                                <View className='goods-money'>
                                    {/* <View style={{ color: '#555', fontSize: '12px', textDecorationLine: 'line-through', textAlign: 'right' }}>¥{orderInfo.itemsInfo?.item_fee/100}</View> */}
                                    <View style={{ color: '#222', fontSize: '18px', textAlign: 'right' }}><Text style={{ fontSize: '12px', whiteSpace: 'normal', textAlign: 'right' }}> ¥</Text>{info.price ? info.price / 100 : ''}</View>
                                </View>
                            </View>)
                        })}
                        <View className='content-money'>
                            <View style={{ fontSize: '12px', color: '#555', textAlign: 'right' }}>订单金额：¥{orderInfo.price ? orderInfo.price / 100 : ''}</View>
                            <View style={{ fontSize: '18px', textAlign: 'right' }} className='mark'><Text style={{ fontSize: '12px', whiteSpace: 'normal', textAlign: 'right' }}>本单佣金：¥</Text>{orderInfo.rebate ? orderInfo.rebate / 100 : ''}</View>
                        </View>
                        <View className='content-footer'>
                            <View className='detail-text'>
                                <View className='title'>下单账户：</View>
                                <View className='detail'>{orderInfo.username}({orderInfo.mobile})</View>
                            </View>
                            <View className='detail-text'>
                                <View className='title'>订单编号：</View>
                                <View className='detail'>{orderInfo.order_id}</View>
                            </View>
                            <View className='detail-text'>
                                <View className='title'>下单时间：</View>
                                <View className='detail'>{dayjs.unix(orderInfo.created).format('YYYY-MM-DD HH:mm:ss')}</View>
                            </View>
                            <View className='detail-text'>
                                <View className='title'>收货时间：</View>
                                <View className='detail'>{orderInfo.ordersAssociations?.end_time?dayjs.unix(orderInfo.ordersAssociations?.end_time).format('YYYY-MM-DD HH:mm:ss'):''}</View>
                            </View>
                            <View className='detail-text'>
                                <View className='title'>佣金到账：</View>
                                <View className='detail'>{orderInfo.plan_close_time?dayjs.unix(orderInfo.plan_close_time).format('YYYY-MM-DD HH:mm:ss'):''}</View>
                            </View>
                        </View>
                    </View>


                </View>


                {/* <AtCalendar isMultiSelect currentDate={{
                    start: '2023/10/28', end:
                        '2023/11/11'
                }} /> */}
            </View>
        )
    }
}
